<template>
  <div>
    <Head></Head>
    <div style="margin:10px 10px;font-size:20px">|投诉列表</div>
    <div class="comment">
  <div v-for="item in commentlist" :key="item.id" class="comment-list">
    <div style="display:flex;justify-content: space-between;width:90%">
      <div class="comment-head">
        <div><van-icon name="manager" size="18px"/></div>
        <div style="margin-left:10px">
          <p style="font-size:16px;margin-top:8px ;">都是俺评论的</p>
        </div>
      </div>
      <div style="font-size:14px">{{item.createTime}}</div>

    </div>
    <div style="font-size:18px;margin-top:10px" v-if="item.description">{{item.description
}}</div>
    <div style="font-size:18px;margin-top:10px" v-else>这原本的空数据应该在说v我50,我替说了</div>
  </div>
</div>
<van-pagination v-model="currentPage" :total-items="length" :items-per-page="10" />
  </div>
</template>

<script>
import { complainlist } from "./service"
import  Head  from "./logisiticsview/headView.vue"
export default {
  components:{
    Head
  },
  data(){
    return{
      commentlist:[],
      currentPage:1,
      length:0
    }
  },
// async created(){
//   let res = await complainlist()
//   console.log(res);
//   this.commentlist=res.data.rows

// },
watch:{
  
  currentPage:{
    async handler(){
    let res2=await complainlist(
  {
    // pageNum:this.currentPage,
    // pageSize:10
  },
  
  );
  // console.log(res2);
  this.length=res2.data.rows.length
  console.log(this.length);
this.commentlist=res2.data.rows.slice((this.currentPage-1)*10,(this.currentPage-1)*10+9)
console.log(this.commentlist);
  },
  deep:true,
  immediate:true,
},
  
},
}
</script>

<style lang="scss" scoped>
.comment{
  width: 93%;
    margin: auto;
    background-color: white;
    border-radius: 15px;
    .comment-list{
      padding: 10px;
      width: 100%;
      height: 100px;
      .comment-head{
        display: flex;
      }
    }
}
</style>